<!--
 * @Author: Liz.Zheng
 * @Date: 2021-11-03 13:53:42
 * @LastEditTime: 2022-08-13 11:14:31
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: 申请审核列表
 * @Motto: Write the code. Change the world.
-->

<template>
  <div id="memberApplyList" class="route-page">
    <!-- <section class="route-content"> -->
    <a-page-header v-if="$store.getters.isMobile" title="成员申请列表" />
    <a-page-header v-else title="成员申请列表" @back="() => $router.back()" />
    <a-table
      class="table"
      :columns="columns"
      :data-source="dataList"
      row-key="uid"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #title>
        <span>状态：</span>
        <template v-for="tag of statusList" :key="tag.key">
          <checkable-tag
            :checked="checkedStatus == tag.key"
            @change="handleStatusChange(tag)"
          >
            {{ tag.title }}
          </checkable-tag>
        </template>
      </template>
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'joinMethod'">
          <tag color="purple" v-if="text === 'create'">创建加入</tag>
          <tag color="blue" v-if="text === 'invite'">邀请加入</tag>
          <tag color="green" v-if="text === 'code'">机构码加入</tag>
        </template>
        <template v-if="column.key === 'action'">
          <template v-if="record.status == 0">
            <a-button type="link" @click="handleRecord(text, 1)">
              <template #icon><CheckCircleOutlined /></template>
              通过
            </a-button>
            <a-button type="link" danger @click="handleRecord(text, 2)">
              <template #icon><CloseCircleOutlined /></template>
              拒绝
            </a-button>
          </template>
          <template v-else>
            <span style="color: #999">{{
              record.status == 1 ? "已通过" : "已拒绝"
            }}</span>
          </template>
        </template>
      </template>
    </a-table>
    <!-- </section> -->

    <a-modal
      title="确认角色"
      :visible="passVisible"
      centered
      :width="500"
      @ok="handleRecordRequest(true)"
      @cancel="onCancel"
    >
      <a-alert
        show-icon
        message="未选择角色时，该成员无法进入后台。您也可以在角色管理列表分配成员的角色。"
      ></a-alert>
      <a-row align="middle" style="width: 100%; margin-top: 20px">
        <a-col :span="6">所属角色：</a-col>
        <a-col :span="14">
          <a-select
            v-model:value="roleId"
            :options="roleList"
            style="width: 100%"
            placeholder="请选择一名角色来设置该成员权限"
          />
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, ref, watch, computed } from "vue";
import { Tag, CheckableTag, message } from "ant-design-vue";
import {
  CheckCircleOutlined,
  CloseCircleOutlined,
} from "@ant-design/icons-vue";
import request from "../../../common/utils/request";

export default defineComponent({
  name: "MemberApplyList",
  components: { Tag, CheckableTag, CheckCircleOutlined, CloseCircleOutlined },
  setup() {
    /**
     * @description: 表格
     */
    const dataList = ref([]);
    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const loading = ref(false);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));
    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
    };
    watch([page, limit], () => {
      getDataList();
    });
    const getDataList = () => {
      loading.value = true;
      request
        .get("/org", "/department/checkList", {
          page: page.value,
          limit: limit.value,
          status: checkedStatus.value,
        })
        .then((res) => {
          dataList.value = res.list;
          total.value = res.total;
        })
        .finally(() => {
          loading.value = false;
        });
    };

    // 绑定的角色
    const roleId = ref(undefined);
    const passVisible = ref(false);
    const roleList = ref([]);
    const getRoleList = () => {
      if (!roleList.value.length) {
        request.get("/org", "/department/role").then((res) => {
          roleList.value = res.list.map((item) => ({
            value: item.id,
            label: item.name,
          }));
        });
      }
    };
    let recordParams = {};
    const handleRecord = (uid, status) => {
      recordParams = {
        uid,
        status,
      };
      if (status == 1) {
        // 通过
        getRoleList();
        passVisible.value = true;
      } else {
        handleRecordRequest();
      }
    };

    const handleRecordRequest = (isConfirm) => {
      request
        .post("/org", "/department/checkUser", {
          ...recordParams,
          role_id: roleId.value,
          needMsg: true,
        })
        .then((res) => {
          message.success(res.msg || "操作成功");
          page.value = 1;
          getDataList();
          if (isConfirm) {
            roleId.value = undefined;
            passVisible.value = false;
          }
        });
    };

    const onCancel = () => {
      roleId.value = undefined;
      passVisible.value = false;
    };

    /**
     * @description: 状态
     */

    const checkedStatus = ref(0);
    const handleStatusChange = (tag) => {
      if (checkedStatus.value == tag.key) {
        return;
      }
      checkedStatus.value = tag.key;
      page.value = 1;
      getDataList();
    };
    /**
     * @description: 初始化
     */

    const init = () => {
      getDataList();
    };
    init();
    return {
      columns,
      dataList,
      handleRecord,
      statusList,
      checkedStatus,
      handleStatusChange,
      loading,
      page,
      limit,
      total,
      pagination,
      handleTableChange,
      roleId,
      roleList,
      passVisible,
      handleRecordRequest,
      onCancel,
    };
  },
});

const columns = [
  { title: "申请人", dataIndex: "realname" },
  { title: "手机号码", dataIndex: "phone" },
  { title: "部门", dataIndex: "company" },
  {
    title: "邀请方式",
    dataIndex: "join_method",
    key: "joinMethod",
  },
  { title: "操作", dataIndex: "uid", key: "action" },
];

const statusList = [
  { key: 4, title: "全部" },
  { key: 0, title: "待审核" },
  { key: 1, title: "已通过" },
  { key: 2, title: "已拒绝" },
];
</script>

<style lang="less" scoped>
#memberApplyList {
  background: #fff;
  .table {
    padding: 0px 24px;
  }
}
</style>
